import { AgGridReact } from "ag-grid-react";
import React, { Component } from "react";
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-balham.css";
import TableData from "../../constants/TableData";
import AGTableColumns from "../../constants/AGTableColumns";
import { Button, Checkbox, Modal } from "antd";
export default class AGTable extends Component {
  constructor(props) {
    super(props);
    let columns = AGTableColumns;
    let selectValues = [];
    for (let i = 0; i < columns.length; i++) {
      const item = columns[i];
      selectValues.push(item.field);
      if (item.field !== "cy") {
        continue;
      }
      columns[i].cellRenderer = (a) => {
        const ediv = document.createElement("div");
        console.log("value", a);
        let url = `https://racing.hkjc.com/racing/content/Images/RaceColor/${a.value}.gif`;
        ediv.innerHTML = `<img src="${url}"/>`;
        return ediv;
      };
    }
    this.state = {
      selectValues: selectValues,
      showModal: false,
      columns: columns,
    };
  }

  _changeColumsAction = (values) => {
    // console.log("数据变化", values);
    this.setState({ selectValues: values });
  };

  _showModal = () => {
    this.setState({ showModal: true });
  };

  _saveChange = () => {
    let columns = [];
    for (const iterator of this.state.columns) {
      let show = this.state.selectValues.indexOf(iterator.field) > -1;
      columns.push({ ...iterator, hide: !show });
    }
    this.setState({ showModal: false, columns: columns });
  };

  render() {
    return (
      <div
        className="ag-theme-balham"
        style={{
          height: "300px",
          width: "800px",
          marginLeft: "30px",
        }}
      >
        <Button onClick={this._showModal}>选择展示列</Button>
        <AgGridReact columnDefs={this.state.columns} rowData={TableData} />

        <Modal
          visible={this.state.showModal}
          onCancel={() => {
            this.setState({ showModal: false });
          }}
          onOk={this._saveChange}
        >
          <Checkbox.Group
            onChange={this._changeColumsAction}
            value={this.state.selectValues}
          >
            {AGTableColumns.map((item, index) => {
              return (
                <Checkbox
                  key={item.field}
                  style={{ marginLeft: 0 }}
                  value={item.field}
                >
                  {item.headerName}
                </Checkbox>
              );
            })}
          </Checkbox.Group>
        </Modal>
      </div>
    );
  }
}
